<template>
    <div class="changePassword">
        <div class="msg-content">
            <el-page-header @back="goBack" content="修改密码的">
            </el-page-header>

            <!-- 修改密码的位置 -->

            <el-form :model="registerRuleForm" status-icon label-position="left" ref="ruleForm" label-width="85px"
                class="demo-form-inline">

                <el-form-item label="邮箱：">
                    <el-input v-model="registerRuleForm.user_email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="验证码：">
                    <el-input v-model.number="registerRuleForm.code" placeholder="请输入验证码"></el-input>
                    <el-button type="primary" class="code" @click.prevent="sendCode" :disabled="showBtn">{{ btnText
                    }}</el-button>
                    <!-- <el-input ></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> -->
                </el-form-item>


                <!-- <el-form-item label="用户昵称：">
                    <el-input type="type" placeholder="请输入用户昵称" v-model="registerRuleForm.user_name"
                        autocomplete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="新密码：">
                    <el-input type="password" placeholder="新密码：" :show-password="true"
                        v-model="registerRuleForm.new_password" autocomplete="off"></el-input>
                </el-form-item>

                <div class="btn">
                    <el-button type="primary" class="register" @click="changePassword">修改密码</el-button>
                    <!-- <el-button class="goBack" @click="goBack">返回</el-button> -->
                </div>
            </el-form>
        </div>
    </div>
</template>
  
  
<script>

import { validForm } from '../untils/validForm'

import { sendCode, userSendCodeFindPassword, findPwd } from '../http/request'
export default {
    data() {
        return {
            userInfo: {

            },

            // 信息收集
            registerRuleForm: {
                // 用户密码
                new_password: 'wwp123456',
                //邮箱
                user_email: '1369706358@qq.com',
                // 验证码
                code: ''
            },

            // 控制按钮倒计时的
            showBtn: false,

            // 倒计时结束的
            timer: null,

            btnText: "发送",

            timerNum: 60,

            userInfo: ""
        }
    },

    created() {
        // 

        // 获取本地的token和用户信息
        let userInfo = localStorage.getItem('useInfo');

        if (userInfo) {
            this.userInfo = JSON.parse(userInfo);

            console.log('this.userInfo', this.userInfo);
        }
    },

    methods: {
        goBack() {
            this.$router.go(-1);
        },

        changePassword() {
            //构造表单验证信息  注册正则
            let o = {

                new_password: {
                    value: this.registerRuleForm.new_password,
                    errorMsg: '密码由数字字母下划线组合(6-16字符)',
                    reg: /^[A-Za-z]\w{5,15}$/
                },
                user_email: {
                    value: this.registerRuleForm.user_email,
                    errorMsg: '邮箱格式不对',
                    reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                },
                code: {
                    value: this.registerRuleForm.code,
                    errorMsg: '验证码至少6个',
                    reg: /^\d{6}$/
                },
            };

            let isPass = validForm.valid(o);


            if (!isPass) {
                return
            }





            if (!this.userInfo.token) {
                this.$message({
                    message: '登录才可以才能修改',
                    type: 'error'
                });
                return
            }


            let data = {
                code: this.registerRuleForm.code,
                token: this.userInfo.token,
                user_email: this.registerRuleForm.user_email,
                new_password: this.registerRuleForm.new_password
            }


            userSendCodeFindPassword(data).then(res => {
                console.log('res', res);

                if (res.data.code != 200) {

                    this.$message({
                        message: '验证码错误',
                        type: 'error'
                    })

                    return
                } else {
                    findPwd(data).then(content => {
                        console.log('content', content);


                        if (content.data.code == 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });

                            // 清空本地存储

                            localStorage.removeItem('useInfo')

                            this.$router.replace('/userlogin')
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    }).catch(err => {

                        this.$message({
                            message: '修改错误了',
                            type: 'error'
                        })
                    })
                }
            }).catch(err => {
                console.log('err', err);
            })


        },
        // 发送验证码
        async sendCode() {
            let o = {
                user_email: {
                    value: this.registerRuleForm.user_email,
                    errorMsg: '邮箱格式不对',
                    reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                }
            };

            let isPass = validForm.valid(o);

            if (!isPass) {
                // 验证不通过
                return
            }

            this.btnText = 60;

            // 按钮的话变成 false
            this.showBtn = true;

            this.timer = setInterval(() => {
                this.btnText--;
                if (this.btnText == 1) {
                    this.showBtn = false;
                    this.btnText = '发送';
                    clearInterval(this.timer)
                }
            }, 1000)
            // return


            // 这里面禁止点击一次之后就倒计时开始；


            // 验证 还要做防抖
            // 验证码
            // 调用发送验证的接口
            await sendCode({ email: o.user_email.value }).then(res => {


                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }

                // 显示发送成功
            }).catch(err => {
                // console.log(err);
                //    
                this.$message({
                    message: '出错了',
                    type: 'warning'
                });
            })

        },



    }


}
</script>
  
<style lang="scss">
.changePassword {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #f7f7f7;

    .msg-content {
        position: absolute;
        left: 50%;
        top: 50%;

        transform: translate3d(-50%, -50%, 0);
        padding: 30px;
        width: 600px;
        height: 800px;
        background: white;
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);

        .demo-form-inline {
            margin-top: 100px;
        }

        .btn {
            display: flex;
            justify-content: space-around;

            .register,
            .goBack {
                width: 100%;
                text-align: center;
            }


        }

        .code {
            margin-left: 10px;
        }

        .el-form-item__content {
            display: flex !important;
        }
    }
}
</style>
  